<template>
    <div>
        <LoadList :loading="shopsListLoading" :no-more="hasMoreShopSell" :containerHeight="dynamicHeight"
            :distance="100" @load-more="shopListLoadMoreData">
            <template v-if="tableList && tableList.length > 0">
                <div class="table_box mb20" v-for="(item, index) in tableList" :key="index">
                    <div class="header_box flex_between">
                        <div class="font_size16">日期：{{ item.day }}</div>
                        <div class=""
                            v-if="item.list && item.list.length > 0">
                            <el-button type="primary" size="mini" icon="el-icon-download" @click="exportReport('2')"
                                style="font-size: 12px;padding:5px">导出{{ item.day }}报表</el-button>
                        </div>
                    </div>
                    <div class="list_box" v-if="item.list && item.list.length > 0">
                        <div v-for="(shop, ishop) in item.list" :key="ishop" @click="shopClick(shop)">
                            <shopCard :rightArea="false" :bgColor="'#f6f5f5'" :goods="{
                                gdimg: shop.goods_img_small,
                                gdname: shop.goods_name,
                                brand: shop.brands_name,
                                gd_brand: shop.category_name,
                                item_no: shop.item_no,
                                unit_info: shop.unit_info
                            }">
                                <template #category_name>
                                    <div class="font_black9 ellipsis" :title="shop.category_name">
                                        <span v-if="shop.category_name"> {{ shop.category_name }} </span>
                                        <span v-if="shop.category_name" class="ml5 mr5"> | </span>
                                        <span v-if="shop.item_no"> {{ shop.item_no }} </span>
                                    </div>
                                </template>
                                <template #right_area>
                                    <div class="font_black ellipsis font_size18" :title="shop.qty_min">{{ shop.qty_min
                                        || '--' }}</div>
                                </template>
                            </shopCard>
                        </div>
                    </div>
                </div>
            </template>
            <empty v-if="tableList.length == 0 && !shopsListLoading && showEmpty"></empty>
        </LoadList>
        <ShopSellDrawer ref="shopSellDrawerRef"></ShopSellDrawer>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch, nextTick } from '@vue/composition-api'
import { useBoundState } from '@/pages/report/hooks/useBoundState.js'
import LoadList from '@/components/commV2/LoadList/index.vue'
import shopCard from '@/components/commV2/ShopCard/index.vue'
import ShopSellDrawer from '@/pages/report/outAndIntoBoundModule/ShopSellDrawer.vue'

const props = defineProps({
    dynamicHeight: {
        type: Number,
        default: 750
    }
})
const {
    shopsListLoading,
    hasMoreShopSell,
    shopList,
    shopListLoadMoreData,
    shopClickInfo,
    getShopDetailList,
    shopDetailList,
    exportReport
} = useBoundState()
const { proxy } = getCurrentInstance()

const tableList = computed(() => {
    return shopList.value
});

const showEmpty = ref(false)
watch([() => shopsListLoading.value, () => shopList.value], ([loading, list]) => {
    if (!loading && (!list || list.length === 0)) {
        nextTick(() => {
            setTimeout(() => {
                showEmpty.value = true
            }, 500)
        })
    } else {
        showEmpty.value = false
    }
}, { immediate: true })

onMounted(() => { })

defineExpose({})

const shopSellDrawerRef = ref(null)
const shopClick = (shop) => {
    shopClickInfo.value = shop
    shopDetailList.value = []
    getShopDetailList()
    shopSellDrawerRef.value.open()
}

</script>

<style lang="scss" scoped>
.table_box {
    box-sizing: border-box;
    border-radius: 4px;
}

.header_box {
    padding: 0 0 6px 0;
    border-bottom: 1px solid #f0eeee;
    margin-bottom: 10px;
}

.list_box {
    border-radius: 4px;
}
</style>
